<template>
  <a-form
    :model="formState"
    name="normal_register"
    class="register-form"
    :label-col="{ style: { width: '100px', textAlign: 'left' } }"
    @finish="onFinish"
    @finishFailed="onFinishFailed"
  >
    <a-form-item
      label="用户名"
      name="username"
      :rules="[{ required: true, message: '请输入用户名!' }]"
    >
      <a-input v-model:value="formState.username">
        <template #prefix>
          <UserOutlined class="site-form-item-icon" />
        </template>
      </a-input>
    </a-form-item>

    <a-form-item
      label="密码"
      name="password"
      :rules="[{ required: true, message: '请输入密码!' }]"
    >
      <a-input-password v-model:value="formState.password">
        <template #prefix>
          <LockOutlined class="site-form-item-icon" />
        </template>
      </a-input-password>
    </a-form-item>

    <a-form-item
      label="确认密码"
      name="checkPassword"
      :rules="[{ required: true, message: '请再次输入密码!' }]"
    >
      <a-input-password v-model:value="formState.checkPassword">
        <template #prefix>
          <LockOutlined class="site-form-item-icon" />
        </template>
      </a-input-password>
    </a-form-item>

    <a-form-item
      label="邮箱"
      name="email"
      :rules="[{ required: true, message: '请输入您的邮箱!' }]"
    >
      <a-input-group compact>
        <a-input
          v-model:value="formState.email"
          style="width: calc(100% - 100px)"
        >
          <template #prefix>
            <MailOutlined class="site-form-item-icon" />
          </template>
        </a-input>
        <a-button
          type="default"
          style="width: 100px"
          @click="send"
          :disabled="isSend"
          >{{ sendMsg }}</a-button
        >
      </a-input-group>
    </a-form-item>

    <a-form-item
      label="验证码"
      name="verifyCode"
      :rules="[{ required: true, message: '请输入邮箱验证码!' }]"
    >
      <a-input v-model:value="formState.verifyCode">
        <template #prefix>
          <SendOutlined class="site-form-item-icon" />
        </template>
      </a-input>
    </a-form-item>

    <a-form-item class="register-form-button-box">
      <a-button
        :disabled="disabled"
        type="primary"
        html-type="submit"
        class="register-form-button"
        @click="handleRegister"
      >
        注册
      </a-button>
    </a-form-item>
  </a-form>
</template>

<script lang="ts">
import { defineComponent, reactive, computed, ref } from 'vue';
import { message } from 'ant-design-vue';
import { sendVerifyCode } from '@/apis/email';
import { register } from '@/apis/user';
import {
  UserOutlined,
  LockOutlined,
  MailOutlined,
  SendOutlined
} from '@ant-design/icons-vue';

interface FormState {
  username: string;
  email: string;
  password: string;
  checkPassword: string;
  verifyCode: string;
}
export default defineComponent({
  components: {
    UserOutlined,
    LockOutlined,
    MailOutlined,
    SendOutlined
  },
  setup() {
    const formState = reactive<FormState>({
      username: '',
      email: '',
      password: '',
      checkPassword: '',
      verifyCode: ''
    });

    const onFinish = (values: any) => {
      console.log('Success:', values);
    };

    const onFinishFailed = (errorInfo: any) => {
      console.log('Failed:', errorInfo);
    };

    const disabled = computed(() => {
      return !(formState.username && formState.password);
    });

    // 验证码操作
    const sendMsg = ref('发送验证码');
    const isSend = ref(false);
    const send = () => {
      if (!formState.email) {
        message.error('请填写邮箱后获取验证码！');
      } else if (
        /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/.test(
          formState.email
        ) == false
      ) {
        message.error('请填写正确的邮箱号后获取验证码！');
      } else {
        sendVerifyCode(formState.email).then((res) => {
          isSend.value = true;
          let timer = 60;
          sendMsg.value = timer + 's';
          const timeFun = setInterval(() => {
            --timer;
            sendMsg.value = timer + 's';
            if (timer == 0) {
              isSend.value = false;
              sendMsg.value = '重新发送';
              clearInterval(timeFun);
            }
          }, 1000);
        });
      }
    };

    // 注册
    const handleRegister = () => {
      const { username, email, password, checkPassword, verifyCode } =
        formState;
      if (password !== checkPassword) {
        message.error('密码与确认密码不一致!');
      } else {
        register(
          email.trim(),
          username.trim(),
          password,
          verifyCode.trim()
        ).then((res) => {

          // 注册成功后初始化表单
          formState.username = '';
          formState.email = '';
          formState.password = '';
          formState.checkPassword = '';
          formState.verifyCode = '';
        });
      }
    };

    return {
      formState,
      onFinish,
      onFinishFailed,
      disabled,
      activeKey: ref('1'),
      isSend,
      sendMsg,
      send,
      handleRegister
    };
  }
});
</script>
<style scoped lang="less">
.register-form {
  max-width: 450px;
  margin: 0 auto;
  padding-top: 20px;
}
.register-form-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.register-form-forgot {
  margin-bottom: 24px;
}
.register-form-button-box {
  text-align: center;
  .register-form-button {
    // margin-top: 20px;
    width: 60%;
    // height: 40px;
  }
}
</style>
